<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">

			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.SN' prop='SN'>
					<el-input v-model.trim='formInline.SN' :autosize="{ minRows: 4 }" type="textarea" clearable
						:disabled="formInline?.status == 1" placeholder='请输入设备序列号,多个使用","分开,例如:123,125,333'
						:formatter="(value) => value.replace(/[，]/g, ',')"
						:parser="(value) => value.replace(/[，]/g, ',')" />
				</el-form-item>
			</re-col>

			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.modelInfo' prop='modelInfo'>
					<el-cascader :options="cascaderOptions" :props="cascaderProps" v-model='formInline.modelInfo'
						clearable :placeholder='prompt?.modelInfo' @change="cascaderDataChange" :key="cascaderKey"
						:style="{ width: '100%' }" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop='unityId'>
					<unitParentSelect v-model='formInline.unityId' clearable :style="{ width: '100%' }"
						:placeholder='prompt?.unityId' @blur="formValidateField(ruleFormRef, 'unityId')"/>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.expireDate' prop='expireDate'>
					<el-date-picker :style="{ width: '100%' }" v-model="formInline.expireDate" clearable type="date"
						:placeholder='prompt?.expireDate' format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.serveTime' prop='serveTime'>
					<el-input v-model.trim="formInline.serveTime" :placeholder='prompt?.serveTime'
						:formatter="(value) => value.replace(/[^\d]/g, '')"
						:parser="(value) => value.replace(/[^\d]/g, '')">
						<template #append>月</template>
					</el-input>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.superviseUnityIds' prop='superviseUnityIds'>
					<superviseUnitySelect v-model='formInline.superviseUnityIds' clearable multiple
						:placeholder='prompt?.superviseUnityIds' :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'superviseUnityIds')"/>
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/resource-management/serial-number-management/index';
import type { CascaderProps } from 'element-plus'
import { getProductTypeSelectList, getProductModelSelectList } from '@/api/manage/resource-management/serial-number-management/index';
import { getFactorySelectList } from '@/api/manage/product-management/product-type/index'
import superviseUnitySelect from '@/components/select/superviseUnitySelect/superviseUnitySelect.vue'
import unitParentSelect from '@/components/select/unitParentSelect/unitParentSelectTree.vue'
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
});

const formRules = reactive(<FormRules>{
	SN: [{ required: true, message: prompt?.SN, trigger: 'blur' },],
	modelInfo: [{ required: true, message: prompt?.modelInfo, trigger: 'blur' },],
	expireDate: [{ required: true, message: prompt?.expireDate, trigger: 'blur' },],
	unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
	superviseUnityIds: [{ required: true, message: prompt?.superviseUnityIds, trigger: 'blur' },],
	serveTime: [{ required: true, message: prompt?.serveTime, trigger: 'blur' },],
});
const ruleFormRef = ref();
const cascaderOptions = ref([]);
const cascaderKey = ref(0)
const cascaderProps: CascaderProps = {
	lazy: true,
	lazyLoad(node, resolve) {
		const { level } = node
		if (level == 0) {
			// getFactorySelectList().then(res => {
			// 	let nodes = res.result.map((item) => ({
			// 		value: item.factoryId,
			// 		label: item.factoryName,
			// 	}))
			// 	resolve(nodes)
			// })
			resolve(null)
		} else if (level == 1) {
			getProductTypeSelectList({ factoryId: node.value }).then(res => {
				let nodes = res.result.map((item) => ({
					value: item.productId,
					label: item.productName,
				}))
				resolve(nodes)
			})
		} else if (level == 2) {
			getProductModelSelectList({ productId: node.value }).then(res => {
				let nodes = res.result.map((item) => ({
					value: item.modelId,
					label: item.modelName,
					leaf: true
				}))
				resolve(nodes)
			})
		}
	},
}

const cascaderDataChange = (e) => {
	if (e?.length == 3) {
		props.formInline.factoryId = e[0]
		props.formInline.productId = e[1]
		props.formInline.modelId = e[2]
	} else {
		props.formInline.factoryId = null
		props.formInline.productId = null
		props.formInline.modelId = null
	}
}

const loadCascaderOptions = () => {
	getFactorySelectList().then(res => {
		let nodes = res.result.map((item) => ({
			value: item.factoryId,
			label: item.factoryName,
			children: [],
		}))
		if (props.formInline?.modelInfo) {
			nodes.forEach((item) => {
				if (item.value == props.formInline?.modelInfo[0]) {
					getProductTypeSelectList({ factoryId: item.value }).then(res => {
						let nodes1 = res.result.map((item1) => ({
							value: item1.productId,
							label: item1.productName,
							children: [],
						}))
						nodes1.forEach((item2) => {
							if (item2.value == props.formInline?.modelInfo[1]) {
								getProductModelSelectList({ productId: item2.value }).then(res => {
									let nodes2 = res.result.map((item3) => ({
										value: item3.modelId,
										label: item3.modelName,
										leaf: true
									}))
									item2.children = nodes2
									cascaderKey.value++
								})
							}
						})
						item.children = nodes1
					})
				}
			})
		}
		cascaderOptions.value = nodes
	})
}

function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef, loadCascaderOptions });
</script>
